<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件筛选页面</title>
   
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/car_filter.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../layui/layui.js"></script>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <!-- header-top -->
        <div class="header-top">
            <div class="middle">
            <ul class="right">
                <a href="javascript:void(0)">帮助中心</a><span>|</span>
                <a href="javascript:void(0)">400-321-2202</a><span>|</span>
                <p href="javascript:void()">微信</p>
            </ul>
           <ul class="left">
              <a href="customer/login.html">登陆</a><span>|</span>
              <a href="customer/regist.html">注册</a><span>|</span>
              <p class="name" >我的随行</p>
           </ul>
        </div>
        </div>
        <!-- header-navigation -->
        <div class="header-navigation">
            <div class="middle">
                <!-- log -->
                <div class="header-img">
                    <img src="../images/header-logo.PNG" alt="">
                </div>
                <div class="header-nav">
                    <li><a href="../index.html" class="header-word">首页<span></span> </a></li>
                    <li><a href="car_rental/car_filter.html"  class="header-word active">去租车<span></span></a></li>
                    <li><a  href="../car_rental/car_select.html"  class="header-word">车型查询<span></span></a></li>
                    <li><a href="../network/businessoutlets.html"  class="header-word">网点导航<span></span></a></li>
                    <li><a href="../customer/customer_center.html"  class="header-word">个人中心<span></span></a></li>
                    <li><a href="javascript:void(0)" class="header-word">特价优惠<span></span></a></li>
                    <li><a href="javascript:void(0)" class="header-word">我的收藏<span class="myshoucang"></span></a></li>

                    
                </div>
           </div>
        </div>
    </div>
    <!-- 商品展示和筛选 -->
    <div class="car-pro">
        <div class="middle">
             <!-- 地图区域 -->
             <div class="map" id="EhiMap">
                
             </div>
             <div class="map-xingxi">
                <li class="l1">取车门店:</li>
                <li class="l2">八万人体育场</li>
                <li class="l1">上海市徐汇区斜土路2899号甲（光启文化广场内）</li>
                <li class="l3">门店电话：021-64160981</li>
                <li class="l3">门店电话：021-64160981</li>
             </div>
            <!-- 取车时间和地点 -->
            <div class="pro-way">
          <div class="pro-withdraw-select" >
              <!-- 地点选择 -->
              <div class="pro-withdraw-qick">
                  <!-- 取车 -->
                  <label>取车门店:</label>
                  <li class="left">
                     
                      <div>
                          <input type="text" value="苏州" class="layui-input area" >
                      </div>
                      <div class="showAll" id="showAll" style="display: none;">
                        <div class="select">
                            <span>请选择还车地点:</span>
                            <div class="select-city" id="select-city">
    
                            </div>
                            <div class="select-area" id="select-area">
            
                            </div>
                             <div class="select-store" id="select-store">
            
                            </div>
                            <div></div>
                           </div>
                      </div>
                      <div>
                          <input type="text" placeholder="请选择取车门店" class="layui-input in-store">
                      </div>
                  </li>
                  <!-- 还车 -->
                  <label>还车门店:</label>
                  <li class="left1">
                      <div>
                          <input type="text" value="苏州" class="layui-input area1">
                      </div>
                      <div class="showAll1" id="showAll1" style="display: none;">
                        <div class="select">
                            <span>请选择还车地点:</span>
                            <div class="select-city1" name="select-city1" id="select-city1">

                            </div>
                            <div class="select-area1" id="select-area1">
            
                            </div>
                            <div class="select-store1" id="select-store1">
            
                            </div>
                        </div>
                </div>
                      <div>
                          <input type="text" placeholder="请选择还车门店" class="layui-input in-store1">
                      </div>
                      
                  </li>
              </div>
              <!-- 时间选择 -->
              <div class="pro-time-select">
                <!-- 开始日期 -->
                 <label>取车时间:</label>
                  <div  class="time-qick" >
                      <div class="layui-form">
                          <div class="layui-form-item">
                            <div class="layui-inline">
                              <div class="layui-inline" id="test6">
                                <div class="layui-input-inline">
                                  <input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
                                </div>
                              </div>
                            </div>
                          </div>
                    </div>  
                      <div class="layui-inline">
                          <div class="layui-input-inline time">
                          <input type="text" class="layui-input" id="test-limit3" placeholder="HH:mm:ss">
                          </div>
                      </div>
                  </div>
                  <!-- 结束日期 -->
                  <label>还车时间:</label>
                  <div class="time-return" >
                      <!-- 日期 -->
                        <div class="layui-form">
                          <div class="layui-form-item">
                            <div class="layui-inline">
                              <div class="layui-inline" id="test6">
                                <div class="layui-input-inline">
                                  <input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- 时间 -->
                       <div class="layui-inline">
                      <div class="layui-input-inline time">
                      <input type="text" class="layui-input" id="test-limit3" placeholder="HH:mm:ss">
                      </div>
                  </div>
                  </div>
              </div>
              <div class="pro-sumbit">
                
                <a href="javascript:void(0)">
                    立即查询
                </a>
              </div>
          </div>
            </div>
            <!-- 条件筛选 -->
            <div class="pro-condition">
                <!-- 热销车型 -->
             <div class="car-model">
                <div class="hot-car-model">
                    <img src="../images/index_img/hot.png" style="margin-top: 15px;">
                </div>
                <!-- 展示9个 -->
                <li>
                    <a href="javascript:void(0)" class="hot-active">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
                 <li>
                    <a href="javascript:void(0)">
                     <img src="../images/index_img/car-c1.png" alt="">
                     经济型
                  </a>
                 </li> 
          
             
             </div>
             <!-- 品牌 -->
             <div class="car-brand">
                <div class="car-lable">品牌:</div>
               <div class="car-name">
                <li><a href="javascript:void(0)" class="active">全部</a></li>
                <li><a href="javascript:void(0)">雪弗兰</a></li>
                <li><a href="javascript:void(0)">大众</a></li>
                <li><a href="javascript:void(0)">福特</a></li>
                <li><a href="javascript:void(0)">本田</a></li>
                <li><a href="javascript:void(0)">丰田</a></li>
                <li><a href="javascript:void(0)">马自达</a></li>
                <li><a href="javascript:void(0)">保时捷</a></li>
                <li><a href="javascript:void(0)">雪弗兰</a></li>
                <li><a href="javascript:void(0)">大众</a></li>
                <li><a href="javascript:void(0)">福特</a></li>
                <li><a href="javascript:void(0)">本田</a></li>
                <li><a href="javascript:void(0)">丰田</a></li>
                <li><a href="javascript:void(0)">马自达</a></li>
                <li><a href="javascript:void(0)">保时捷</a></li>
                <li><a href="javascript:void(0)">雪弗兰</a></li>
                <li><a href="javascript:void(0)">大众</a></li>
                <li><a href="javascript:void(0)">福特</a></li>
                <li><a href="javascript:void(0)">本田</a></li>
                <li><a href="javascript:void(0)">丰田</a></li>
                <li><a href="javascript:void(0)">马自达</a></li>
                <li><a href="javascript:void(0)">保时捷</a></li>
                <li><a href="javascript:void(0)">雪弗兰</a></li>
                <li><a href="javascript:void(0)">大众</a></li>
                <li><a href="javascript:void(0)">福特</a></li>
                <li><a href="javascript:void(0)">本田</a></li>
                <li><a href="javascript:void(0)">丰田</a></li>
                <li><a href="javascript:void(0)">马自达</a></li>
                <li><a href="javascript:void(0)">保时捷</a></li>
                <li><a href="javascript:void(0)">雪弗兰</a></li>
                <li><a href="javascript:void(0)">大众</a></li>
                <li><a href="javascript:void(0)">福特</a></li>
                <li><a href="javascript:void(0)">本田</a></li>
                <li><a href="javascript:void(0)">丰田</a></li>
                <li><a href="javascript:void(0)">马自达</a></li>
                <li><a href="javascript:void(0)">保时捷</a></li>
               </div>
             </div>
             <!-- 价格 -->
             <div class="car-price">
                <div class="car-lable">品牌:</div>
                <div class="car-select">
                    <li><a href="javascript:void(0)" class="active">全部</a></li>
                    <li><a href="javascript:void(0)">100元以下</a></li>
                    <li><a href="javascript:void(0)">100-200元</a></li>
                    <li><a href="javascript:void(0)">200-300元</a></li>
                    <li><a href="javascript:void(0)">400-800元</a></li>
                    <li><a href="javascript:void(0)">800元以上</a></li>
                </div>
             </div>
            </div>
            <!-- 商品展示区 -->
            <div class="pro-product">
                    <!-- 排序 -->
                    <div class="pro-sort">
                        <li><a>默认排序</a></li>
                        <li><a>按价格</a></li>
                        <li><a>按排量</a></li>
                        <li class="rg">*共有<a>
                            24
                        </a>种车型可以选择
                        </li>
                    </div>
                    <!-- 商品1 -->
                    <div class="pro-rearly">
                        <div class="img">
                            <img src="../images/index_img/car-c1.png" alt="">
                        </div>
                        <!-- 车辆信息 -->
                        <div class="information">
                            <li><a class="car-name">荣威Ei6沪牌</a></li> 
                            <li class="info">
                                <a>自动 1.5T</a><span>|</spana>
                                <a>三箱</a><span>|</span>
                                <a>5座</a><span>|</span>
                                <a href="../details/datails_of_cars.html">车辆详情></a>
                            </li>
                            <li class="lable">
                                <a>省油</a>
                                <a>舒适</a>
                                <a>新能源</a>
                            </li>
                        </div>
                        <!-- 价格 -->
                        <div class="pro-price">
                            <a>¥</a>
                            <a>120</a>
                            <span>/每日</span>
                        </div>
                        <!-- 预定按钮 -->
                        <div class="bottom">
                            <a href="../order/order_drop.html">预购</a>
                        </div>
                    </div>
                   
            <!-- 这故事继续翻页再翻页——翻页区 -->
            <div class="page-select">
                 <span>分页:共</span>  
                 <a>9</a> 
                 <span>页 / </span> 
                 <a>100</a> 
                 <span>条</span>  
                 <a href="" class="sel">上一页</a> 
                 <span> 
                 当前是第
                 </span>
                 <a>9</a>
                 <span>
                 页 
                 </span>
                 <a href="" class="sel">下一页</a>
            </div>
        </div>
    </div>
     <!-- 底部导航栏 -->
     <div class="index-bottom">
        <div class="middle">
            <!-- 账户服务 -->
            <div class="bottom-account">
              <ul>
                <span>新手指南</span>
                <li><a href="javascript:void(0)">注册新用户</a></li>
                <li><a href="javascript:void(0)">预定演示</a></li>
                <li><a href="javascript:void(0)">取消或者修改订单</a></li>
              </ul>
              <ul>
                <span>租车贴士</span>
                <li><a href="javascript:void(0)">支付方式</a></li>
                <li><a href="javascript:void(0)">精彩活动</a></li>
                
              </ul>
              <ul>
                <span>售后服务</span>
                <li><a href="javascript:void(0)">联系售后</a></li>
                
              </ul>
              <ul>
                <span>会员服务</span>
                <li><a href="javascript:void(0)">忘记密码</a></li>
                <li><a href="javascript:void(0)">会员充值</a></li>
                <li><a href="javascript:void(0)">积分说明</a></li>
         
    
              </ul>
              <ul>
                <span>网站帮助</span>
                <li><a href="javascript:void(0)">注册新用户</a></li>
              
                <li><a href="javascript:void(0)">联系我们</a></li>
              </ul>
              <ul>
              </ul>
              <ul>
  
              </ul>
              
            </div>
            <!--相关信息-->
            <div class="connect">
              <div class="line-one">
                <li><a>关于随行</a></li> <span>｜</span>
                <li><a>移动客户端</a></li> <span>｜</span>
                <li><a>帮助中心</a></li> <span>｜</span>
                <li><a>投诉</a></li> <span>｜</span>
                <li><a>联系我们</a></li>
              </div>
              <div class="line-two">
                <a>
                  Copyright © 2007-2022 苏州随行信息技术服务有限公司  &nbsp;
                  ICP证：沪B2-20140130沪ICP备08010394号 &nbsp;&nbsp;
                  违法和不良信息举报：fuzhaohong@1hai.cn</a>
              </div>
            </div>
        </div>
      </div>
    <script src="../layui/layui.js"></script>
    <script src="../js/car_filter.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c329c0cfa9d945232b82ccb74441adfb&plugin=AMap.AdvancedInfoWindow">
    </script>
    <script type="text/javascript" src="../js/map.js"></script>
</body>
</html>